<template>
    <div class="main">
        <headNav title="运动活跃度"></headNav>
        <div class="top">
            <div class="t-left">
                <div class="headImg">
                    <!-- <img  :src="studentDetail.portrait" alt=""> -->
                    <img v-if="!studentDetail.portrait" src="@/assets/img/default_head.png" alt="">
                    <img v-else :src="studentDetail.portrait" alt="" onerror="this.src = 'static/img/default_head.png'">
                </div>
                <div class="p-info">
                    <p class="realName">
                        {{studentDetail.studentName}}
                    </p>
                    <p class="className">
                        {{studentDetail.gradeName + studentDetail.className}}
                    </p>
                </div>
            </div>
            <div class="t-right">
                <p class="classSort">
                    <img class="iconPay" src="@/assets/img/studentSport/iconPay.png" alt="">
                    <span>
                        班级排名：{{studentDetail.ranking}}
                    </span>
                </p>
                <p class="percent">
                    超过{{studentDetail.transcendence}}的人
                </p>
            </div>
        </div>
        <div style="padding: 0 0.2rem;">
            <div class="echartBox">
                <div class="activeNum">
                    今日活跃度:{{studentDetail.dailyActivity}}
                </div>
                <div class="echartLine">
                    <lined :data="lineData"></lined>
                </div>
            </div>
            <innerNav @getRank="getRank"></innerNav>
            <div class="tableContent" ref="scroll">
                <div v-for="(item,index) in studentList" :key="index">
                    <div class="oneStudent">
                        <div class="sortNum">
                            {{index+1}}
                        </div>
                        <div class="imgBox" :class="index == 0 ? 'first': index == 1 ? 'second' : index == 2 ? 'third' : '' " @click="toDetail(item)">
                            <img v-if="!item.portrait" src="@/assets/img/default_head.png" alt="">
                            <img v-else :src="item.portrait" alt="" onerror="this.src = 'static/img/default_head.png'">
                            <!-- <img :src="item.portrait" alt=""> -->
                        </div>
                        <div class="c-right">
                            <div class="left-r" @click="toDetail(item)">
                                <p class="studentName">
                                    {{item.studentName}}
                                </p>
                                <p class="common">
                                    {{item.gradeName + item.className}}
                                </p>
                            </div>
                            <div class="right-r">
                                <p class="likeNum">
                                    {{item.praiseNum}}
                                </p>
                                <p>
                                    <img @click="likeGo(item)" v-if="item.praise" class="like" src="@/assets/img/studentSport/zaning.png" alt="">
                                    <img @click="likeGo(item)" v-else class="like" src="@/assets/img/studentSport/zan.png" alt="">
                                </p>
                            </div>
                            <div class="mid-r">
                                <p class="common">
                                    <img class="huoyue" src="@/assets/img/studentSport/huoyue.png" alt="">
                                    <span>活跃度：{{item.dailyActivity}}</span>
                                </p>
                                <p class="common">
                                    超过{{item.transcendence}}的人
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="load-p">
                    <load-more :show-loading="false" :tip="'没有更多了'" background-color="#fbf9fe"></load-more>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import innerNav from './headNav'
import lined from './echarts/line'
import { LoadMore} from 'vux'
import infiniteScroll from '@/components/infiniteScroll'
export default {
    name: 'parentIndex',
    components: {
        headNav, innerNav, lined, LoadMore, infiniteScroll
    },
    computed: {
        parentId () {
            return this.$store.state.user.parentId
        },
        studentId () {
            return this.$store.state.user.studentId
        }
    },
    data () {
        return {
            studentList: [],
            studentDetail: '',
            rank: 1,
            lineData: []
        }
    },
    mounted () {
        this.getList()
        this.getStudentDetail()
        this.getEchartsData()
    },
    methods :{
        // 切换日月排行
        getRank (val) {
            this.rank = val
            this.getList()
        },
        // 获取今日日期
        getToday () {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return  year + '-' + month + '-' + day
        },
        // 获取学生详情
        getStudentDetail () {
            var params = {
                studentId: this.studentId,
                todayDate: this.getToday()
            }
            this.$store.dispatch('studentSport/GetStudentDetail', params).then(
                res => {
                    if (res.status == 200) {
                        this.studentDetail = res.data
                    }
                }
            )
        },
        // 获取折线图
        getEchartsData () {
             var params = {
                studentId: this.studentId,
                todayDate: this.getToday()
            }
            this.$store.dispatch('studentSport/GetEchartsData', params).then(
                res => {
                    if (res.status == 200) {
                        var arr = []
                        res.data.forEach(item => {
                            var obj = {name: item.createTimeStr, value: item.activityNum}
                            arr.push(obj)
                        })
                        this.lineData = arr
                    }
                }
            )
        },
        // 获取列表
        getList () {
            var params = {
                parentId: this.parentId,
                studentId: this.studentId,
                rankDesc: this.rank == 0 ?'yesterday' : this.rank == 1 ?  'today': 'month',
                todayTime: this.getToday()
            }
            this.$store.dispatch('studentSport/GetParentList', params).then(
                res => {
                   if (res.status == 200) {
                       this.studentList = res.data
                   }
                }
            )
        },
        // 跳转详情
        toDetail (item) {
            //  this.$store.commit('studentSport/setStudentId', item.studentId)
            //  this.$router.push('parentActive')
        },
        // 点赞 / 取消点赞
        likeGo (item) {
            if (this.rank == 2) {
                return
            }
            var params = {
                bePraseId: item.studentId,
                praseId: this.parentId,
                rankDesc: this.rank == 0 ?'yesterday' : this.rank == 1 ?  'today': 'month',
                status: item.praise ? 2 : 1,
                todayDate: this.getToday()
            }
            this.$store.dispatch('studentSport/LikeGo', params).then(
                res => {
                    if (res.status) {
                        item.praiseNum = item.praise ? item.praiseNum - 1 : item.praiseNum + 1
                        item.praise = !item.praise
                    }
                }
            )
        }
    }
}
</script>
<style  scoped>
    .top{
        background: url('../../assets/img/studentSport/top.png') no-repeat;
        background-size: 100%;
        width: 100%;
        height: 3rem;
        overflow: hidden;
        padding: 0 0.44rem;
        box-sizing: border-box;
    }
    .t-left{
        float: left;
    }
    .headImg{
        vertical-align: top;
        display: inline-block;
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        margin-right: 0.2rem;
    }
    .headImg img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }
    .p-info{
        display: inline-block;
        color: #fff;
    }
    .realName{
        font-size: 0.36rem;
        font-size: bold;
        line-height: 0.72rem;
    }
    .className{
        font-size: 0.24rem;
        line-height: 0.48rem;
        color: #FEFEFE;
    }
    .t-right{
        float: right;
        color: #fff;
    }
    .classSort{
        font-size: 0.3rem;
        line-height: 0.72rem;
    }
    .iconPay{
        width: 0.26rem;
        height: 0.34rem;
        vertical-align: sub;
    }
    .percent{
        font-size: 0.24rem;
        line-height: 0.48rem;
        color: #FEFEFE;
    }
    .oneStudent{
        padding: 0.2rem 0.02rem 0.2rem 0;
    }
    .sortNum{
        display: inline-block;
        font-size: 0.3rem;
        color: #666666;
        vertical-align: top;
        height: 0.9rem;
        line-height: 0.9rem;
        width: 0.6rem;
    }
    .imgBox{
        display: inline-block;
        width: 0.9rem;
        height: 1.01rem;
        margin-right: 0.18rem;
        vertical-align: top;
        text-align: center;
    }
    .first{
        background: url('../../assets/img/studentSport/one.png') no-repeat;
        background-size: 100%;
    }
    .second{
        background: url('../../assets/img/studentSport/two.png') no-repeat;
        background-size: 100%;
    }
    .third{
        background: url('../../assets/img/studentSport/three.png') no-repeat;
        background-size: 100%;
    }
    .imgBox img{
        width: 0.82rem;
        height: 0.82rem;
        position: relative;
        top: 0.14rem;
        border-radius: 50%;
        object-fit: cover;
    }
    .c-right{
        width: 70%;
        display: inline-block;
        padding-top: 0.13rem;
    }
    .c-right p{
        line-height: 0.46rem;
    }
    .huoyue{
        width: 0.35rem;
        height: 0.28rem;
        vertical-align: middle;
    }
    .like{
        width: 0.27rem;
        height: 0.28rem;
        vertical-align: middle;
    }
    .left-r{
        float: left;
    }
    .studentName{
        width: 1.6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.3rem;
        color: #000;
        font-weight: bold;
    }
    .common{
        font-size: 0.24rem;
        color: #999;
    }
    .right-r{
        width: 0.6rem;
        float: right;
        text-align: right;
    }
    .likeNum{
        color: #666;
        font-size: 0.24rem;
    }
    .mid-r{
        float: right;
        /* margin-right: 0.42rem; */
    }
    .line{
        width: 4.6rem;
        height: 0.02rem;
        background: #E5E5E5;
        float: right;
    }
    .ct{
        display: flex;
        align-items: center;
    }
    .load-p{
        padding: 1rem 0 0 0;
    }
    .echartBox{
        margin-top: -1.5rem;
        width: 100%;
        height: 3.86rem;
        border-radius: 0.15rem;
        background: #fff;
        margin-bottom: 0.26rem;
        padding: 0.32rem 0;
        box-sizing: border-box;
    }
    .activeNum{
        text-align: right;
        color: #333333;
        font-size: 0.24rem;
        padding: 0 0.32rem;
    }
    .echartLine{
        width: 100%;
        height: 3rem;
    }
    .tableContent{
        padding: 0 0.2rem 0.2rem;
        background: #fff;
    }
</style>